<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* background-size属性，用来设置背景图片的尺寸，兼容到IE9。 */
        /* background-size:100px 200px  宽度 高度*/
        /* 值也可以用百分数来设置，表示为盒子宽高的百分之多少 */
        /* 需要等比例设置的值，另一个值写auto */
        /* background-size的两个特殊钢值：contain  cover*/
        /* contain 表示将背景图片智能改变尺寸，以容纳到盒子里。相当于长度或宽度最长的那个设为100%，另一个为auto*/
        /* cover   表示将背景图片智能改变尺寸，以撑满盒子。 */
        /* 如果只有一个值，那另外一个值的默认值为auto。 */
        div{
            width: 200px;
            height: 200px;
            background-image: url(2.png);
            border: 1px solid #000;
            margin:10px;
        }
        div.box1{
            background-size: 100px auto;
        }
        div.box2{
            background-size: 200px auto;
        }
        div.box3{
            background-size: 100% auto;
        }
        div.box4{
            /* 等价于background-size: 30% auto;  */
            background-size: 30% ;
        }

        div.box5{
            background-size:contain;
        }
        div.box6{
            background-size: cover;
        }


    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
</body>
</html>